<template>
  <view class="product-detail">
<!--    <view class="detail-header">
      <p class="title">商品详情</p>
    </view> -->
    <!-- <view class="detail-content" v-if="dwadawdaw" v-html="formattedDetailImg"></view> -->
    <u-parse v-if="dwadawdaw && detailImg" :content="detailImg"></u-parse>
    <div v-else-if="detailImg && !detailImg" style="text-align: center; padding: 10px; display: flex; flex-direction: column; align-items: center">
      <image class="" mode="aspectFit"
        src="https://www.wantongkonggu.cn/crmebimage/profile/upload/2025/03/25/zwsj_20250325090754A001.png"> </image>
      <span
        style="font-family: PingFangSC, PingFang SC; font-weight: 400; font-size: 28rpx; color: #a8a8a8; line-height: 40rpx; text-align: center; font-style: normal">商家暂未上传</span>
    </div>
  </view>
</template>

<script>
export default {
  props: {
    detailImg: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      formattedDetailImg: this.formatImg(this.detailImg),
      dwadawdaw: false
    };
  },
  mounted() {
    setTimeout(() => {
      this.dwadawdaw = true;
    }, 1000);
  },
  methods: {
    formatImg(content) {
      if (!content) return '';
      const regex = /<img[^>]*>/g;
      content = content.replace(regex, function (match) {
        return match.replace('>', ' style="max-width:100%;height:auto;">');
      });
      return content;
    }
  },
  watch: {
    detailImg(newVal) {
      this.formattedDetailImg = this.formatImg(newVal);
    }
  }
};
</script>

<style lang="less" scoped>
.product-detail {
  padding: 20px;
  // background-color: #f9f9f9;
  border-radius: 8px;

  .detail-header {
    margin-bottom: 15px;
    border-bottom: 1px solid #ddd;
    padding-bottom: 5px;

    .title {
      font-size: 18px;
      font-weight: bold;
      color: #333;
    }
  }

  .detail-content {
    ::v-deep img {
      border-radius: 4px;
      margin-bottom: 10px;
    }

    p,
    ul,
    ol {
      font-size: 16px;
      color: #555;
      line-height: 1.6;
      margin-bottom: 10px;
    }

    ul,
    ol {
      padding-left: 20px;
    }

    li {
      margin-bottom: 5px;
    }
  }
}
</style>
